<template>
	<view>
		<view class="tip">温馨提示：点击图片即可查看大图</view>
		<view class="u-flex uni-row">
			<view class="u-flex-1 uni-view__img">
				<image class=""  mode="aspectFill" :src="baseInfo.idCardPersonalImageUrl" :data-src="baseInfo.idCardPersonalImageUrl" @tap="previewImage"></image>
				<view class="image-title">法人身份证人像照</view>
			</view>
			<view class="u-flex-1 uni-view__img">
				<image class="" mode="aspectFill" :src="baseInfo.idCardNationalImageUrl" :data-src="baseInfo.idCardNationalImageUrl" @tap="previewImage"></image>
				<view class="image-title">法人身份证国徽照</view>
			</view>
		</view>
		<view class="u-flex uni-row">
			<view class="u-flex-1 uni-view__img">
				<image class=""  mode="aspectFill" :src="baseInfo.businessLicenseImageUrl" :data-src="baseInfo.businessLicenseImageUrl" @tap="previewImage"></image>
				<view class="image-title">营业执照(三证合一码)</view>
			</view>
			<view class="u-flex-1 uni-view__img">
				<image class="" mode="aspectFill" :src="baseInfo.merchantImageUrl" :data-src="baseInfo.merchantImageUrl" @tap="previewImage"></image>
				<view class="image-title">商户门头照</view>
			</view>
		</view>
		
		<u-row gutter="16">
		
		</u-row>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseInfo: {}
			}
		},
		onLoad() {
			this.getInfo()
		},
		methods: {
			previewImage: function(e) {
				var current = e.target.dataset.src
				uni.previewImage({
					current: current,
					urls: [current]
				})
			},
			getInfo() {
				this.$u.api.getMerchantInfo().then(res=>{
					if(res.code == 0){
						res.data.idCardPersonalImageUrl = res.data.idCardPersonalImage.url || '';
						res.data.idCardNationalImageUrl = res.data.idCardNationalImage.url || '';
						res.data.businessLicenseImageUrl = res.data.businessLicenseImage.url || '';
						res.data.merchantImageUrl = res.data.merchantImage.url || '';
						this.baseInfo = res.data;
					}else{
						uni.showToast({
							icon:'none',
						    title: res.msg
						});
					}
				})
			},
		}
	}
</script>

<style scoped>
	.tip {
		margin-top: 50rpx;
		margin-bottom: 40rpx;
		color: #999999;
		font-size: 24rpx;
		text-align: center;
	}
	.u-flex-1 {
		padding: 15rpx;
	}
	.uni-view__img image {
		width: 100%;
		height: 224rpx;
		border-radius: 10rpx 10rpx 0rpx 0rpx;
	}
	.image-title {
		margin-top: -4px;
		font-size: 28rpx;
		color: #FFFFFF;
		text-align: center;
		padding: 10rpx 0;
		background: #5581FF;
		border-radius: 0rpx 0rpx 10rpx 10rpx;
	}
</style>
